import { defineComponent } from "vue";
import "./index.less";
import { IconTextProps } from "./types";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  name: "icon-text",
  props: IconTextProps,
  emits: ["click"],
  setup(props, { emit }) {
    return () => {
      return (
        <div class={"icon-text-row"} onClick={() => emit("click")}>
          <div class="image-wrapper">
            <img
              src={props.url}
              style={{
                width: getSize(props.iconSize),
                height: getSize(props.iconSize),
                minWidth: getSize(props.iconSize),
                minHeight: getSize(props.iconSize),
              }}
            />
            {props.maskText && (
              <div class="overlay">
                <span>{props.maskText}</span>
              </div>
            )}
          </div>
          <div class={["text-[#333] text-[12px]", props.childClass]}>
            {props.text}
          </div>
          {props.foot && <div>{props.foot}</div>}
        </div>
      );
    };
  },
});
